<template>
  <el-container>
    <el-header>
      <TopBar />
    </el-header>
    <el-main class="el-main">
      <div class="content">
        <!-- 社团基本信息 -->
        <div class="club-header">
          <div class="img-details">
            <!-- <img
              :src="clubData.clubimg || defaultImg"
              alt=""
              class="clubimg-details round-img"
            > -->
            <img
              src="../assets/shouhuan.jpg"
              alt=""
              class="clubimg-details round-img"
            >
          </div>
          <div class="club-info">
            <div class="clubname-details">{{ clubData.clubname }}</div>
            <div class="club-description">{{ clubData.description || '这个社团暂时没有简介' }}</div>
            <div class="club-stats">
              <div class="stat-item">
                <span class="stat-value">{{ clubData.memberCount || 0 }}</span>
                <span class="stat-label">成员</span>
              </div>
              <div class="stat-item">
                <span class="stat-value">{{ clubData.posts?.length || 0 }}</span>
                <span class="stat-label">帖子</span>
              </div>
              <div class="stat-item">
                <span class="stat-value">{{ clubData.active?.length || 0 }}</span>
                <span class="stat-label">活动</span>
              </div>
            </div>
            <div class="club-actions">
              <el-button type="primary" round>加入社团</el-button>
              <el-button type="info" round>关注</el-button>
            </div>
          </div>
        </div>

        <!-- 内容导航 -->
        <div class="club-nav">
          <div
            v-for="tab in tabs"
            :key="tab.key"
            class="nav-item"
            :class="{ active: activeTab === tab.key }"
            @click="activeTab = tab.key"
          >
            {{ tab.label }}
          </div>
        </div>

        <!-- 社团活动展示 -->
        <div v-if="activeTab === 'activities'" class="club-activities">
          <h2 class="section-title">社团活动</h2>
          <div v-if="!clubData.active || clubData.active.length === 0" class="no-data">暂无活动安排</div>
          <div v-else class="activities-grid">
            <el-card
              v-for="activity in sortedActivities"
              :key="activity.activeid"
              class="activity-card"
            >
              <h4>{{ activity.activename }}</h4>
              <div class="activity-info">
                <p><i class="el-icon-time"></i> {{ activity.activetime }}</p>
                <p><i class="el-icon-location"></i> {{ activity.activeadd }}</p>
              </div>
              <div class="activity-action">
                <el-button size="small" type="primary" round>报名参加</el-button>
              </div>
            </el-card>
          </div>
        </div>

        <!-- 社团成员展示 -->
        <div v-if="activeTab === 'members'" class="club-members">
          <h2 class="section-title">社团成员</h2>
          <div class="member-filter">
            <el-radio-group v-model="memberFilter" size="small">
              <el-radio-button label="all">全部成员</el-radio-button>
              <el-radio-button label="admin">管理团队</el-radio-button>
            </el-radio-group>
          </div>
          <div v-if="!filteredMembers.length" class="no-data">暂无成员信息</div>
          <div v-else class="members-grid">
            <el-card v-for="member in filteredMembers" :key="member.id" class="member-card">
              <div class="member-avatar">
                <img :src="member.avatar || defaultImg" alt="" class="round-img">
              </div>
              <div class="member-info">
                <div class="member-name">{{ member.name }}</div>
                <div class="member-role">{{ member.role }}</div>
              </div>
            </el-card>
          </div>
        </div>

        <!-- 社团帖子 -->
        <div v-if="activeTab === 'posts'" class="club-posts">
          <h2 class="section-title">社团帖子</h2>
          <div v-if="!clubData.posts || clubData.posts.length === 0" class="no-data">暂无帖子</div>
          <div v-else class="myclubpost">
            <div
              class="waterfall-item"
              v-for="post in clubData.posts"
              :key="post.id"
              @click="openPostDetail(post)"
            >
              <div class="card-content">
                <div class="image-container">
                  <img
                    :src="post.image || defaultImg"
                    class="card-image"
                    @load="onImageLoad($event, post.id)"
                    @error="updateCardHeight($event.target.closest('.waterfall-item'))"
                    :alt="post.title"
                  />
                </div>
                <div class="post-info">
                  <div class="post-title">{{ post.title }}</div>
                  <div class="author-info">
                    <span class="author">
                      <img
                        :src="post.authorimg || defaultImg"
                        alt=""
                        class="avatar-sm"
                      >
                      <span>{{ post.author }}</span>
                    </span>
                    <span class="like-count">
                      <img
                        src="../components/icons/zan.png"
                        alt=""
                        class="like-icon"
                      >
                      <span>{{ post.likes || 0 }}</span>
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <PostDetailModal v-if="selectedPost" :post="selectedPost" @close="selectedPost = null" />
    </el-main>
  </el-container>
</template>

<script setup>
import { ref, computed, onMounted, nextTick } from 'vue'
import { useRoute } from 'vue-router'
import TopBar from '../components/TopBar.vue'
import PostDetailModal from '../components/PostDetailModal.vue'

// 默认图片
const defaultImg = '/src/assets/shouhuan.jpg'

// 获取路由参数
const route = useRoute()
const clubId = route.params.id

// 选项卡状态
const tabs = [
  { key: 'posts', label: '社团帖子' },
  { key: 'activities', label: '活动安排' },
  { key: 'members', label: '成员列表' }
]
const activeTab = ref('posts')

// 帖子详情弹窗状态
const selectedPost = ref(null)

// 成员筛选状态
const memberFilter = ref('all')

// 模拟数据 - 实际应用中应该从API获取
const clubData = ref({
  id: 1,
  clubname: '音乐社',
  clubimg: 'src/assets/shouhuan.jpg',
  description: '音乐社是一个充满活力的社团，致力于为校园带来美妙的音乐体验。我们定期举办各类音乐活动，包括校园音乐会、乐器培训和音乐鉴赏等。无论你是音乐爱好者还是专业演奏者，都能在这里找到属于自己的舞台。',
  memberCount: 56,
  posts: [
    {
      id: 1,
      image: 'src/assets/xie.jpg',
      title: '音乐社李宁驭帅14',
      description: '这是第一篇帖子的描述。',
      author: '张三',
      authorimg: 'src/components/icons/touxiang.png',
      likes: 10,
      liked: false,
      comments: []
    },
    {
      id: 2,
      image: 'src/assets/1982.jpg',
      title: '开往1982',
      description: '坐上了开往1982的列车，列车开动，载我们到下一段旅程',
      author: '李四',
      authorimg: 'src/components/icons/touxiang.png',
      likes: 20,
      liked: false,
      comments: []
    },
    {
      id: 3,
      image: 'src/assets/xuelongtie.jpg',
      title: '雪龙贴',
      description: '坐上了开往1982的列车，列车开动，载我们到下一段旅程',
      author: '王五',
      authorimg: 'src/components/icons/touxiang.png',
      likes: 270,
      liked: false,
      comments: []
    }
  ],
  active: [
    {
      activeid: 1,
      activename: '音乐社排练',
      activetime: '2024/10/13',
      activeadd: 'A8二楼排练室',
    },
    {
      activeid: 2,
      activename: '校园歌手大赛',
      activetime: '2024/10/20',
      activeadd: '大学生活动中心',
    },
    {
      activeid: 3,
      activename: '音乐鉴赏会',
      activetime: '2024/10/27',
      activeadd: 'A6报告厅',
    },
  ],
  members: [
    { id: 1, name: '张三', role: '社长', avatar: 'src/components/icons/touxiang.png', isAdmin: true },
    { id: 2, name: '李四', role: '副社长', avatar: 'src/components/icons/touxiang.png', isAdmin: true },
    { id: 3, name: '王五', role: '宣传部长', avatar: 'src/components/icons/touxiang.png', isAdmin: true },
    { id: 4, name: '赵六', role: '成员', avatar: 'src/components/icons/touxiang.png', isAdmin: false },
    { id: 5, name: '钱七', role: '成员', avatar: 'src/components/icons/touxiang.png', isAdmin: false },
    { id: 6, name: '孙八', role: '成员', avatar: 'src/components/icons/touxiang.png', isAdmin: false },
  ]
})

// 计算排序后的活动
const sortedActivities = computed(() => {
  return clubData.value.active?.sort((a, b) => new Date(a.activetime) - new Date(b.activetime)) || [];
});

// 过滤后的成员列表
const filteredMembers = computed(() => {
  if (!clubData.value.members) return [];

  if (memberFilter.value === 'all') {
    return clubData.value.members;
  } else if (memberFilter.value === 'admin') {
    return clubData.value.members.filter(m => m.isAdmin);
  }

  return [];
});

// 打开帖子详情
function openPostDetail(post) {
  selectedPost.value = post;
}

// 处理图片加载，根据宽高比调整图片高度
function onImageLoad(event, postId) {
  const img = event.target;
  const naturalWidth = img.naturalWidth;
  const naturalHeight = img.naturalHeight;

  // 计算宽高比
  const aspectRatio = naturalWidth / naturalHeight;

  // 根据宽高比决定显示高度
  let displayHeight;
  if (aspectRatio > 1.2) { // 横图
    displayHeight = '160px';
  } else if (aspectRatio < 0.8) { // 竖图
    displayHeight = '240px';
  } else { // 方图
    displayHeight = '200px';
  }

  // 设置图片高度
  img.style.height = displayHeight;

  // 触发瀑布流重排
  nextTick(() => {
    updateCardHeight(img.closest('.waterfall-item'));
  });
}

// 统一更新卡片高度的函数
function updateCardHeight(item) {
  if (!item) return;

  const cardContent = item.querySelector('.card-content');
  if (cardContent) {
    const contentHeight = cardContent.getBoundingClientRect().height;
    const rowGap = 16; // 与CSS中的grid-gap相匹配
    const rowHeight = 1; // grid-auto-rows 设置为1px
    const rowSpan = Math.ceil((contentHeight + rowGap) / (rowHeight + rowGap));
    item.style.gridRowEnd = `span ${rowSpan}`;
  }
}

// 修改onMounted以初始化瀑布流
onMounted(() => {
  // 加载社团数据
  // fetchClubData(clubId)

  // 在数据加载后设置窗口大小变化监听
  nextTick(() => {
    // 确保所有卡片都有正确的高度
    setTimeout(() => {
      const cardItems = document.querySelectorAll('.waterfall-item');
      cardItems.forEach(item => updateCardHeight(item));
    }, 100);

    // 监听窗口大小变化
    window.addEventListener('resize', () => {
      const cardItems = document.querySelectorAll('.waterfall-item');
      cardItems.forEach(item => updateCardHeight(item));
    });
  });
});
</script>

<style scoped>
::-webkit-scrollbar{
  display: none;
}
::-webkit-sticky{
  display: block;
}

.content {
  position: absolute; /* 绝对定位 */
  top: 60px; /* 距离顶部的距离等于顶部区域的高度 */
  left: 200px; /* 距离左侧的距离等于左侧区域的宽度 */
  right: 200px;
  bottom: 0; /* 距离底部为0，撑满剩余空间 */
  padding: 20px; /* 为内容添加内边距 */
}

/* 社团头部信息 */
.club-header {
  display: flex;
  padding: 20px;
  background-color: #28232e;
  border-radius: 15px;
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.img-details {
  margin-right: 30px;
}

.clubimg-details {
  width: 200px;
  height: 200px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

.club-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.clubname-details {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #fff;
}

.club-description {
  color: #b0bec5;
  line-height: 1.6;
  margin-bottom: 20px;
  max-height: 80px;
  overflow: hidden;
}

.club-stats {
  display: flex;
  margin-bottom: 25px;
}

.stat-item {
  margin-right: 30px;
  text-align: center;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #00aeff;
  display: block;
}

.stat-label {
  color: #b0bec5;
  font-size: 14px;
}

.club-actions {
  margin-top: auto;
}

.round-img {
  border-radius: 50%;
  object-fit: cover;
}

/* 导航栏 */
.club-nav {
  display: flex;
  background-color: #28232e;
  border-radius: 15px;
  margin-bottom: 20px;
  overflow: hidden;
}

.nav-item {
  padding: 15px 25px;
  color: #b0bec5;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s ease;
}

.nav-item:hover {
  background-color: rgba(0, 174, 255, 0.1);
  color: #fff;
}

.nav-item.active {
  background-color: rgba(0, 174, 255, 0.2);
  color: #00aeff;
  border-bottom: 3px solid #00aeff;
}

/* 内容区域通用样式 */
.section-title {
  color: #fff;
  font-size: 22px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.no-data {
  padding: 40px;
  text-align: center;
  color: #666;
  background-color: #1f1b24;
  border-radius: 10px;
  margin-bottom: 20px;
}

/* 活动区域 */
.club-activities,
.club-members,
.club-posts {
  background-color: #28232e;
  border-radius: 15px;
  padding: 20px;
  margin-bottom: 20px;
}

.activities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 15px;
}

.activity-card {
  background: linear-gradient(135deg, #2c3e50, #3498db);
  color: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border: none;
}

.activity-card h4 {
  margin: 0 0 12px 0;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}

.activity-info p {
  margin: 8px 0;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
}

.activity-info p i {
  margin-right: 8px;
  font-size: 16px;
}

.activity-action {
  margin-top: 15px;
  text-align: right;
}

/* 成员区域 */
.member-filter {
  margin-bottom: 20px;
}

.members-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
}

.member-card {
  background-color: #1f1b24;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.member-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  border-color: rgba(0, 174, 255, 0.3);
}

.member-avatar {
  text-align: center;
  padding: 15px 0;
}

.member-avatar img {
  width: 80px;
  height: 80px;
}

.member-info {
  padding: 10px 15px;
  text-align: center;
}

.member-name {
  font-weight: bold;
  font-size: 16px;
  color: #fff;
}

.member-role {
  color: #b0bec5;
  font-size: 13px;
  margin-top: 5px;
}

/* 帖子瀑布流 */
.myclubpost {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1px;
  grid-gap: 16px;
}

.waterfall-item {
  grid-row-end: span auto;
  break-inside: avoid;
  transition: all 0.3s ease;
}

.card-content {
  background-color: #2d2636;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
  min-height: 100px;
  position: relative;
  backdrop-filter: blur(5px);
}

.waterfall-item:hover {
  transform: translateY(-8px);
}

.waterfall-item:hover .card-content {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 15px rgba(123, 31, 162, 0.3);
  border-color: rgba(123, 31, 162, 0.5);
}

.image-container {
  width: 100%;
  overflow: hidden;
  min-height: 80px;
  background-color: #1a171c;
  position: relative;
}

.image-container::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(to top, rgba(45, 38, 54, 1), rgba(45, 38, 54, 0));
  z-index: 1;
  pointer-events: none;
}

.card-image {
  width: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1);
  display: block;
  filter: brightness(1.05);
}

.waterfall-item:hover .card-image {
  transform: scale(1.07);
}

.post-info {
  padding: 15px 18px;
  position: relative;
}

.post-title {
  color: #ffffff;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  margin-bottom: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.author-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #b0bec5;
  margin-top: 5px;
}

.author {
  display: flex;
  align-items: center;
  max-width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background-color: rgba(22, 18, 26, 0.35);
  padding: 5px 10px;
  border-radius: 20px;
  backdrop-filter: blur(3px);
}

.avatar-sm, .like-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-right: 6px;
}

.like-count {
  display: flex;
  align-items: center;
  background-color: rgba(22, 18, 26, 0.35);
  padding: 5px 10px;
  border-radius: 20px;
  backdrop-filter: blur(3px);
  transition: all 0.3s ease;
}

.like-count:hover {
  background-color: rgba(123, 31, 162, 0.4);
  transform: scale(1.05);
}

/* 响应式布局 */
@media (max-width: 1400px) {
  .myclubpost {
    grid-template-columns: repeat(2, 1fr);
  }

  .club-header {
    flex-direction: column;
  }

  .img-details {
    margin: 0 auto 20px;
  }
}

@media (max-width: 768px) {
  .myclubpost {
    grid-template-columns: repeat(1, 1fr);
  }

  .activities-grid,
  .members-grid {
    grid-template-columns: 1fr;
  }
}
</style>